<template>
  <div class="home">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-left">
        <router-link to="/" class="nav-link">首页</router-link>
        <router-link to="/about" class="nav-link">关于我们</router-link>
      </div>
      <div class="nav-right">
        <!-- <router-link to="/login" class="nav-link">登录</router-link> -->
        <span class="user-info">欢迎，admin</span>
        <div class="user-avatar-container" @click="toggleDropdown">
          <div class="user-avatar">
            <img src="https://ts2.tc.mm.bing.net/th/id/OIP-C.zqXwOxrqcaIPnu5VQ_t_lAHaNC?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3" alt="用户头像">
          </div>
          <div v-if="isDropdownVisible" class="dropdown-menu">
            <div class="dropdown-item" @click="goToProfile">个人信息</div>
            <div class="dropdown-item" @click="logout">退出登录</div>
          </div>
        </div>
      </div>
    </nav>

    <header class="hero">
      <h1>精美陶瓷艺术品</h1>
      <p>传承千年工艺，打造现代美学</p>
    </header>
    
    <section class="products">
      <div class="product-categories">
        <div v-for="category in productCategories" :key="category.name" class="product-category">
          <h3>{{ category.name }}</h3>
          <div class="product-grid">
            <div class="product-card" v-for="product in category.items" :key="product.id">
              <div class="product-image">
                <img :src="product.image" :alt="product.name">
              </div>
              <div class="product-info">
                <h3>{{ product.name }}</h3>
                <p class="product-description">{{ product.description }}</p>
                <p class="product-price">￥{{ product.price }}</p>
                <button class="buy-button" @click="goToProductDetail(product.id)">立即购买</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <section class="features">
      <div class="feature">
        <h3>手工制作</h3>
        <p>每件作品都由经验丰富的工匠手工制作</p>
      </div>
      <div class="feature">
        <h3>优质材料</h3>
        <p>选用高品质陶土和釉料，确保产品耐用美观</p>
      </div>
      <div class="feature">
        <h3>快速配送</h3>
        <p>全国范围内快速安全配送</p>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 初始化路由器
const router = useRouter()

// 添加跳转到商品详情页的方法
const goToProductDetail = (productId) => {
  router.push(`/product/${productId}`)
}

// 控制下拉菜单显示状态
const isDropdownVisible = ref(false)

// 切换下拉菜单显示状态
const toggleDropdown = () => {
  isDropdownVisible.value = !isDropdownVisible.value
}

// 跳转到个人信息页面（示例函数）
const goToProfile = () => {
  console.log('跳转到个人信息页面')
  // 这里可以添加实际的路由跳转逻辑
  isDropdownVisible.value = false
}

// 修改退出登录函数
const logout = () => {
  // 清除登录状态
  localStorage.removeItem('userLoggedIn')
  localStorage.removeItem('username')
  
  // 跳转到登录页面
  router.push('/login')
  
  // 关闭下拉菜单
  isDropdownVisible.value = false
}

// 按类别分组的产品数据
const productCategories = [
  {
    name: '热门推荐',
    items: [
      {
        id: 1,
        name: '青花瓷花瓶',
        description: '经典青花瓷设计，优雅的曲线造型',
        price: 899,
        image: 'https://img95.699pic.com/photo/60056/0808.jpg_wh300.jpg!/fh/300/quality/90'
      },
      {
        id: 2,
        name: '紫砂茶具套装',
        description: '传统紫砂工艺，泡茶更香醇',
        price: 1299,
        image: 'https://img.alicdn.com/i1/4110588312/O1CN01OwCjk32BGwg9vkYmf_!!4110588312.jpg'
      },
      {
        id: 9,
        name: '限量特惠套装',
        description: '精选陶瓷三件套，限时特价销售',
        price: 1999,
        originalPrice: 2999,
        image: 'https://cbu01.alicdn.com/img/ibank/2016/399/552/3671255993_849494706.jpg',
        featured: true
      }
    ]
  },
  {
    name: '茶具系列',
    items: [
      {
        id: 3,
        name: '现代陶瓷茶具',
        description: '简约现代设计，适合日常使用',
        price: 599,
        image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t2779/2/559030900/109395/e3150fe9/5718d5a7Nc4bdfca3.jpg!q80.dpg'
      },
      {
        id: 4,
        name: '功夫茶具套装',
        description: '完整功夫茶具，包含茶壶、茶杯等',
        price: 1699,
        image: 'https://ts4.tc.mm.bing.net/th/id/OIP-C.6_Ys3GfYwEt2rTRp0e6urAHaHa?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3'
      },
      {
        id: 5,
        name: '陶瓷茶叶罐',
        description: '密封性好，保持茶叶新鲜',
        price: 299,
        image: 'https://ts3.tc.mm.bing.net/th/id/OIP-C.fad5IfzhS62kEDvzTnynHQHaHa?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3'
      }
    ]
  },
  {
    name: '装饰摆件',
    items: [
      {
        id: 6,
        name: '艺术陶瓷雕塑',
        description: '独特的艺术造型，装饰性强',
        price: 1599,
        image: 'https://pic3.zhimg.com/v2-fc36e2ff6dbbac6fe03c5536e34c379e_r.jpg'
      },
      {
        id: 7,
        name: '陶瓷花器',
        description: '精美花器，提升家居品味',
        price: 799,
        image: 'https://ts3.tc.mm.bing.net/th/id/OIP-C.Foo0FDBavxWFnfUW7-RgDgHaHa?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3'
      },
      {
        id: 8,
        name: '创意陶瓷摆件',
        description: '现代创意设计，独特装饰效果',
        price: 499,
        image: 'https://ts4.tc.mm.bing.net/th/id/OIP-C.EQmsQL0QL8EKWoTuRdpoNgHaHa?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3'
      }
    ]
  }
]
</script>

<style scoped>
/* 添加导航栏样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: 20px;
}

.nav-left {
  display: flex;
  gap: 20px;
}

.nav-link {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #3498db;
}

.nav-link.router-link-exact-active {
  color: #3498db;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
}

.user-info {
  color: #333;
}

.user-avatar-container {
  position: relative;
  cursor: pointer;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  width: 150px;
  z-index: 1000;
  margin-top: 10px;
}

.dropdown-item {
  padding: 12px 15px;
  color: #333;
  cursor: pointer;
  transition: background 0.3s;
  border-bottom: 1px solid #eee;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: #f5f5f5;
}

.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.hero {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10px;
  margin-bottom: 40px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.hero p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.products h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2rem;
}

.product-categories {
  margin-bottom: 50px;
}

.product-category {
  margin-bottom: 40px;
}

.product-category > h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: white;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.product-image {
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  padding: 20px;
}

.product-info h3 {
  margin: 0 0 10px 0;
  font-size: 1.3rem;
}

.product-description {
  color: #666;
  margin-bottom: 15px;
  min-height: 60px;
}

.product-price {
  font-size: 1.4rem;
  font-weight: bold;
  color: #e74c3c;
  margin-bottom: 15px;
}

.buy-button {
  background: #3498db;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  width: 100%;
  transition: background 0.3s ease;
}

.buy-button:hover {
  background: #2980b9;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 50px;
  padding: 30px;
  background: #f8f9fa;
  border-radius: 10px;
}

.feature {
  text-align: center;
}

.feature h3 {
  margin-bottom: 10px;
  color: #333;
}

.feature p {
  color: #666;
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  
  .hero p {
    font-size: 1rem;
  }
  
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  
  .features {
    grid-template-columns: 1fr;
  }
}
</style>